/*验证码部分-开始*/
//获取验证码的点击按钮
var indentify = document.querySelector('.indentify')

//需要动态添加和删除的点击事件
function indentifyClick() {
	alert('已发送验证码')
	//动态移除点击事件，即为在等待时间结束前不能再次点击
	indentify.removeEventListener('click',indentifyClick)
	//倒计时x秒
	var time = 15
	var timmer = document.querySelector('.timmer')
	//开始循环，每秒执行一次
	var interval = setInterval(function() { //用变量存储这个循环，以便于下方关闭该循环
		timmer.innerHTML = '倒计时'+ --time +'s'
		if(time == 0){
			//关闭上面的循环
			clearInterval(interval)
			//再次动态添加点击事件。效果为：倒计时结束后可再次点击
			indentify.addEventListener('click',indentifyClick)
		}
	},1000) //1s执行一次，1s=1000ms
	
}

//动态添加点击事件。单写该句可达到点击有indentify函数的效果
indentify.addEventListener('click',indentifyClick)
/*验证码部分-结束*/
/*-----------------------------------------------*/
/* 登录部分-开始*/

/*登录界面的显示与隐藏*/
var thisLogin=document.querySelector('.thisLogin')
  //点击登录文字弹出登录界面
document.querySelector('#displayLogin').onclick=function(){
	thisLogin.classList.remove('hidden')
}
  //点击登录界面右上角的x关闭登录界面
document.querySelector('.cancel').onclick=function(){
	thisLogin.classList.add('hidden')
}
  //鼠标悬浮到右上角的x改变颜色
document.querySelector('.cancel').onmouseover=function(){
	this.style = 'background-color:red'
}
document.querySelector('.cancel').onmouseout=function(){
	this.style = 'background-color:white'
}

/*AJAX异步登录*/
document.querySelector('form').onsubmit = function(){
	var username = document.querySelector('#username').value
	var password = document.querySelector('#password').value	

	//1.创建请求对象
	var request = new XMLHttpRequest()
	//2.配置请求方式和请求地址
	request.open('POST','http://127.0.0.1:8080/login')
	//2.1设置请求头
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
	//3.发送请求
	request.send(`username=${username}&password=${password}`)
	//4.等待接收内容
	request.onreadystatechange = function(){

		if(request.readyState === 4){ /*等于4表示成功*/
			alert(request.responseText)
			// 登录成功后跳转到本地的myindex.html页面
			if(request.responseText === "登录成功"){
				window.location.href="../html/myindex.html"
			}
			
		}
	}
	return false; //返回false表示阻止表单提交
}
 //账号密码输入不符合规范时输入框改变背景颜色
inputs = document.querySelectorAll('.login-form input:not([type=submit])')
	console.log(inputs)
for (var i = 0; i < inputs.length; i++) {
	/*添加输入框获取焦点事件，改变其背景颜色*/
	// console.log(inputs)
	inputs[i].onfocus = function() {
		this.style = 'background-color:rgba(230, 248, 250, 0.5);'
	}
	/*添加输入框失去焦点事件，改变其背景颜色*/
	inputs[i].onblur = function() {
		this.style = 'background-color:white;'
	}
	/*添加输入框事件，改变其背景颜色*/
	inputs[i].onkeyup = function() {
		if(this.value.length < 6 || this.value.length > 18) {
			this.style = 'background-color:rgba(255, 0, 0, 0.6);'
		}else {
			this.style = 'background-color:rgba(133, 250, 78, 0.6);'
		}
	}
}
/* 登录部分-结束*/